<template>
  <div>
    <div>
      <el-form :model="queryParam" :inline=true style="display: flex">
        <el-form-item label="连接地址">
          <el-input v-model="queryParam.linkUrl" style="width:300px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openSocket">连接</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="danger" @click="closeSocket">断开</el-button>
        </el-form-item>

        <el-form-item label="选择文件">
          <el-select v-model="queryParam.fileName" placeholder="请选择" :clearable=true style="width:300px"
                     @change="changeValue()">
            <el-option v-for="t in logFiles" :label="t" :value="t" :key="t"/>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input type="textarea" v-model="queryParam.message" placeholder="请输入内容" :clearable=true
                    style="width:400px">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="sendMessage">发送</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div v-for="(item, index) in logContext" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>

import store from "../../../store";
import rootUrl from "../../../config/rootUrl";

export default {


  data() {
    return {
      ws: null, // WebSocket对象

      // 查询参数
      queryParam: {
        fileName: '',
        linkUrl: rootUrl.wsUrl + '/' + store.getUser()['userId'],
        message: ''
      },

      logFiles: [],
      logContext: []
    };
  },
  beforeDestroy() {
    this.closeSocket(); // 在组件销毁前关闭WebSocket连接
  },
  mounted() {
    this.listFile()
  },
  methods: {
    openSocket() {
      this.ws = new WebSocket(this.queryParam.linkUrl); // 创建WebSocket连接

      //配置回调函数
      this.ws.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
      this.ws.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
      this.ws.onclose = this.onWebCloseSocket; // WebSocket连接关闭时的处理函数
    },

    closeSocket() {
      if (this.ws) {
        this.ws.close(); // 关闭WebSocket连接
      }
      console.log("关闭WebSocket连接");
    },

    onWebSocketOpen() {
      console.log("连接服务端成功");
    },
    sendMessage: function () {
      this.logContext = []
      let msg = this.queryParam.fileName;
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        console.log("发送消息", msg);
        this.ws.send(msg);
      } else {
        console.log('WebSocket 连接未打开');
      }
    },
    onWebSocketMessage(event) {
      let data = event['data']
      this.logContext.push(data)
      console.log("收到服务端消息", data);
    },
    onWebCloseSocket() {
      console.log("服务端关闭消息");
    },
    changeValue() {
      console.log("下拉选改变了");
      this.queryParam.message = this.queryParam.fileName
    },
    listFile() {
      var _this = this
      this.$api.listDataLog(_this.queryParam).then(res => {
        if (res.code === '00000') {
          _this.logFiles = res.data
        } else {
          _this.$message(res.msg)
        }
      }).catch(e => {
        console.log('接口访问异常!')
      })
    }
  }
}
</script>
